<template>
    <div>
        <div class="contentTopTitle">
            <div class="fl">
                <div class="title">导入历史</div>
            </div>
            <div class="fr">
              <el-button @click="$router.go(-1)" size="mini">返回</el-button>
            </div>
        </div>
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="60px"
                class="formList"
            >
                <el-form-item label="指标大类">
                    <el-select
                        v-model="form.indexType"
                        placeholder="指标大类"
                        @change="getIndexBroadClass"
                    >
                        <el-option
                            v-for="(item, index) in indexTypeList"
                            :key="index"
                            :label="item"
                            :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="指标名称">
                    <el-autocomplete
                        v-model="form.indexName"
                        :fetch-suggestions="searchIndexName"
                        placeholder="请输入"
                        @select="handleSelect"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item label="选择区域">
                    <dx-cascader
                        :area_id.sync="form.areaId"
                        :area_name.sync="form.areaName"
                    />
                </el-form-item>
                <el-form-item label="开始账期">
                    <el-date-picker
                        v-model="form.startTime"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择月"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="结束账期">
                    <el-date-picker
                        v-model="form.endTime"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择月"
                    ></el-date-picker>
                </el-form-item>
                <span style="width: 20%">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handleSearchBegin"
                        >查询</el-button
                    >
                    <el-button
                        size="mini"
                        type="success"
                        @click="handle_export"
                        >导出</el-button
                    >

                </span>
            </el-form>
        </div>
        <div class="breadcrumb clearfix">
            <div class="fl">
                {{ accountInfo.parentName }} > {{ accountInfo.areaName }}
                <span v-if="currentForm.areaName"
                    >> {{ currentForm.areaName }}</span
                >
            </div>
        </div>

        <div class="tableBox">
          <el-table id="table1"
            ref="table"
            size="mini"
            :header-cell-style="{ background: '#eef1f6' }"
            :data="tableData"
            v-loading="tableLoading"
            style="width: 100%"
            border>
            <el-table-column prop="areaType"
                             label="区县分类"/>
            <el-table-column prop="c3Id"
                             label="地址编码"/>
            <el-table-column prop="c3Name"
                             label="地市名称"/>
            <el-table-column prop="c4Name"
                             label="县(市)分公司/分局" />
            <el-table-column prop="className"
                             label="指标大类" />
            <el-table-column prop="indexCode"
                             label="指标编码" />
            <el-table-column prop="indexName"
                             label="指标名称" />
            <!-- <el-table-column label="账期">
                <el-table-column
                    v-for="(item, index) in tableColumn"
                    :key="index"
                    :label="item"
                    prop
                    class-name="right-money"
                    min-width="110"
                >
                    <template slot-scope="scope">{{
                        scope.row.dataValue[index]
                    }}</template>
                </el-table-column>
            </el-table-column> -->
          </el-table>

        </div>

        <!-- 翻页 -->
        <div class="page">
            <el-pagination
                layout="total,sizes, prev, pager, next, jumper"
                :page-sizes="[20, 50, 100]"
                @size-change="sizeChange"
                :page-size="pageSize"
                :total="dataTotal"
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>

    </div>
</template>

<script>
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI";
export default {
    data() {
        return {
            form: {
                indexType: "",
                indexName: "",
                indexCode: "",
                areaId: "",
                areaName: "",
                startTime: "",
                endTime: ""
            },
            indexTypeList: [],
            showEcharts: false,
            areaList: [],
            pageSize: 20,
            currentPage: 1,
            dataTotal: null,
            tableData: [],
            tableLoading: false,
            // tableColumn: [],
            areaNameList: "",
            areaIdList: "",
            accountInfo: "",
            currentForm: {},
            indexNameList: [],
            areaId: "",
        };
    },
    created() {
        this.init();
    },
    mounted() {
        // this.init();
    },
    methods: {
      async init() {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.form.areaId = this.accountInfo.areaId;
        this.form.areaName = this.accountInfo.areaName;
        this.indexTypeList = await this.getIndexType();
        this.form.indexType = this.indexTypeList[0];
        this.getData();
            // this.broadClassList = await this.getIndexBroadClass(this.indexTypeList[0]);
            // let params = {
            //     indexType: this.indexTypeList[0],
            //     indexCode: this.form.indexCode,
            //     // broadClass: '',
            //     // subClass: "",
            //     areaId: this.accountInfo.areaId,
            //     // areaId: 2,
            //     // areaName: '杭州',
            //     areaName: this.accountInfo.areaName,
            //     startTime: "",
            //     endTime: "",
            //     length: this.pageSize,
            //     begin: this.currentPage
            // };
            //初始化的form表单存储
            // this.currentForm = params;
            // this.listIndexData(params);
        },
        //获取列表
        getData() {
          this.tableLoading = true;
          $budgetAPI.importYsIndexHistoryRecordList({
            ...this.form,
            begin: this.currentPage,
            length: this.pageSize,
          },
              res => {
                  this.tableLoading = false;
                  // this.alertError(res);
                  this.form.startTime = res.content.timeArea[0];
                  this.form.endTime =
                      res.content.timeArea[res.content.timeArea.length - 1];
                  console.log(1,res);
                  // this.tableColumn = res.content.timeArea;
                  this.tableData = res.content.data;

                  this.dataTotal = res.content.total;
              },
              err => {}
          );
      },
        //页码改变
        sizeChange(val) {
            this.pageSize = val;
            this.handleSearchBegin();
        },

        handleSearchBegin() {
            this.currentPage = 1;
            // //查询时将所选择的选择项复制一份，防止点击分页时，用户操作form表单
            // this.currentForm = {
            //     indexType: this.form.indexType,
            //     indexName: this.form.indexName,
            //     areaId: this.form.areaId
            //         ? this.form.areaId
            //         : this.accountInfo.areaId,
            //     areaName: this.form.areaName
            //         ? this.form.areaName
            //         : this.accountInfo.areaName,
            //     startTime: this.form.startTime,
            //     endTime: this.form.endTime,
            //     length: this.pageSize,
            //     begin: this.currentPage
            // };
            // this.listIndexData(this.currentForm);
            this.getData();
        },
        //翻页操作
        handleCurrentChange(page) {
            this.currentPage = page;
            //将当前页传到保存的form表单
            this.currentForm.begin = page;
            this.listIndexData(this.currentForm);
        },
        //区域选择 返回ID和name
        areaChange(vId) {
            // vID 是一个数组，循环获取name,根据id
            if (!vId && vId.length === 0) {
                return;
            } //这里多选的时候获取name和单选不一样 单选是对象 多选是数组所以...
            let nameArr = [];
            let codeArr = [];
            let that = this;
            vId.forEach(element => {
                let obj = that.areaList.find(item => {
                    return item.areaId === element;
                });
                if (obj) {
                    nameArr.push(obj.areaName);
                    codeArr.push(obj.areaId);
                }
            });
            this.areaNameList = nameArr.join(",");
            this.areaIdList = codeArr.join(",");
        },
        //指标名称模糊搜索
        async searchIndexName(queryString, cb) {
            //这里是从后台获取数据
            await $budgetAPI.searchIndexName(
                {
                    indexName: queryString
                },
                res => {
                    let results = res.content;
                    results.map((item, index) => {
                        this.$set(item, "value", item.indexName);
                    });
                    cb(results);
                },
                err => {}
            );
        },
        handleSelect(item) {
            this.form.indexCode = item.indexCode;
        },
        //根据层级获取区域树
        getCompanyByLvl() {
            $budgetAPI.getCompanyByLvl(
                {
                    lvl: this.accountInfo.areaLvl,
                    areaId: this.accountInfo.areaId
                },
                res => {
                    this.alertError(res);
                    this.areaList = res.content;
                },
                err => {}
            );
        },
        //获取指标大类（更名为指标小类）
        getIndexBroadClass(val) {
          return new Promise((resolve, reject)=> {
            this.form.broadClass = [];
            $budgetAPI.getIndexBroadClass(
                {
                    indexType: val
                },
                res => {
                    // this.alertError(res);
                    this.broadClassList = res.content
                    resolve(res.content) 
                },
                err => {
                  reject([])
                }
            );
          })
        },
        //获取指标类型（更名为指标大类）
        getIndexType() {
            return new Promise(resolve => {
                $budgetAPI.getIndexType(
                {},
                res => {
                    resolve(res.content);
                },
                err => {}
            );
            }, reject => {

            })
            
        },
        //导出
        handle_export() {
          let areaId = this.form.areaId,
              areaName = this.form.areaName,
              startTime = this.form.startTime,
              endTime = this.form.endTime,
              indexName = this.form.indexName,
              indexType = this.form.indexType,
              indexCode = this.form.indexCode,
              begin = this.currentPage,
              length = this.pageSize;
          let token = getCookie("token");
          window.location.href =
                  prefixAPI.hp +
                  "/api/indexController/exportIndexHistoryData?areaId=" +
                  areaId +
                  "&areaName=" +
                  areaName +
                  "&startTime=" +
                  startTime +
                  "&endTime=" +
                  endTime +
                  "&indexName=" +
                  indexName +
                  "&indexType=" +
                  indexType +
                  "&indexCode=" +
                  indexCode +
                  "&length=" +
                  length +
                  "&begin=" +
                  begin +
                  "&token=" +                    
                  token;
        },
        
    }
};
</script>

<style lang="scss" scoped>
.formList .el-form-item .el-form-item__content .el-autocomplete {
    width: 100%;
}
.quo-pop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
    z-index: 200;
}
</style>
<style lang="scss">
.red {
    color: red;
}

.first-column {
    font-weight: bold;
}
.el-select-dropdown__item {
    width: 187px;
}
.quotaWareHouseDialog {
    .el-dialog {
        margin-top: 85px !important;
    }
    .el-dialog__body {
        padding-top: 0;
    }
}
</style>
